<template>
  <div class="orderEcharts">
    <div :id="echartsId" style="width: 100%;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts/lib/echarts';
  import 'echarts/lib/chart/pie';
  import dtime from 'time-formater';
  import axios from "axios"
  export default {
    props:["baseData","totalRegisCount","echartsKey",'dataType'],
    data(){
      return {
        echartsId:"echarts"+this.echartsKey,
        colorList:["#2D6DCE","#E9E9E9"],
        formatterLabel:"",
        percentPark:"100",
        perHourData:[{value:20, name:'停放数量'},{value:50, name:'可停放数量'}],
        dataTypeMap:{
          't1':'实时车辆数',
          't2':'违停车辆数',
          't3':'违投车辆数'
        }
      }
    },
    mounted(){
      setTimeout(()=>{
        this.initData()
      },500)
    },
    methods: {
      disposeData(){
        this.perHourData=[]
        this.perHourData[0]={value:this.baseData.statisCount, name:this.baseData.enterpriseName}
        this.colorList[0]=this.$store.state.splitMapColors[this.echartsKey]
      },
      initData(){
        this.disposeData()
        if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
          this.myChart.dispose();
        }
        this.myChart = echarts.init(document.getElementById(this.echartsId))
        var option = {
          color:this.colorList,
          tooltip : {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [
            {
              name: this.dataTypeMap["t" + this.$props.dataType] || '车辆',
              type: 'pie',
              radius :['63%', '86%'],
              center: ['50%', '50%'],
              data:this.perHourData,
              labelLine: {
                normal: {
                  show: false
                }
              },
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                }
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 5,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        this.myChart.setOption(option);
        //自适应
        window.addEventListener("resize", ()=> {
          this.myChart.resize();
        });
      }
    },
    watch: {
      dataType(){
        setTimeout(()=>{
          this.initData()
        },500)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .orderEcharts
    width: 100%
    height 100%
    margin 0 auto
    border-radius 15px
    display: flex
    justify-content: center
    color black !important
</style>
